﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>网易云音乐</title>
    <link rel="icon" type="image/ico" href="./src/images/format.ico" />
    <link rel="stylesheet" type="text/css" href="./src/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="./src/css/index.css" />
    <link rel="stylesheet" type="text/css" href="./src/css/g=2018.css" />
    <link rel="stylesheet" type="text/css" href="./src/css/g=2018csslist.css" />
    <link rel="stylesheet" type="text/css" href="./src/css/main&f=recommend.css" />


    <script type="text/javascript" src="./src/libs/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="./src/js/index.js"></script>
    <script type="text/javascript" src="./src/js/lyricScroll.js"></script>
    <script type="text/javascript" src="./src/js/qwebchannel.js"></script>
    <script type="text/javascript" src="./src/js/main&f=slide.js,recommend.js"></script>
    <script type="text/javascript" src="./src/js/g=2018function.js"></script>

    <script type="text/javascript">

        //网页需要和C++交互 服务端需要导入qwebchannel.js 这个js文件
        window.onload = function() {
            //初始化时候需要实例QWebChannel，
            if (typeof qt != 'undefined') new QWebChannel(qt.webChannelTransport, function(channel) {
                window.mSonglst = channel.objects.mSonglst;

                // 接受来自mPlayer的信号连上本地的一个方法进行信息输出
                window.mSonglst.signal_setSonglst.connect(function (message) {
                    SetSongLst(message);
                    //console.log(message);
                });

                window.mSonglst.signal_setNewSongLst.connect(function (message) {
                    SetNewSongLst(message);
                    //console.log(message);
                });

                window.mSonglst.signal_setHotSongLst.connect(function (message) {
                    SetHotSongLst(message);
                    //console.log(message);
                });

                window.mSonglst.setList();

                // 双击搜索列表tr播放
                $infoList_search = $("#infoList_search"),// 搜索列表
                $infoList_search.on("dblclick", "tr", function () {
                    //playMusic($infoList_search.find("tr"), this);
                    //console.log($infoList_search.find("tr"));

                    window.mSonglst.playSong(this.dataset.id);

                });

            });
        }


        //设置搜索的歌曲信息
        function SetSongLst(songInfo) {

            //$("#pageMain").css("display", "none");
            //$("#pageSearch").css("display", "block");

            //获取json格式的数据
            //console.log(songInfo);
            var songs = $.parseJSON(songInfo);
            //console.log(songs[0]['songHash']);
            var listLen = songs.length;
            var listHtml = '';

            for (var i = 0; i < listLen; i++) {
                listHtml += `
							<tr data-index= "`+ i + `"  data-id= "` + songs[i]['songId'] + `" data-song-name= "` + songs[i]['songName'] + `" data-duration= "` + songs[i]['Duration'] + `" data-audio= "` + songs[i]['songHash'] + `" data-album-name= "` + songs[i]['AlbumName'] + `" data-singer-name= "` + songs[i]['songer'] + `" >
								<td class="index" data-num="`+ ((+i + 1) < 10 ? "0" + (+i + 1) : (+i + 1)) + `">` + ((+i + 1) < 10 ? "0" + (+i + 1) : (+i + 1)) + `</td>
								<td><i class="fa fa-heart-o" aria-hidden="true"></i>&nbsp;
                                    <i class="fa fa-download" aria-hidden="true"></i></td>
								<td> `+ songs[i]['songName'] + ` </td>
								<td> `+ songs[i]['songer'] + ` </td>
								<td> `+ songs[i]['AlbumName'] + ` </td>
								<td> `+ songs[i]['Duration'] + ` </td>
							</tr>
						`;
            }

            //// refreshDOM
            $("#infoList_search").html(listHtml);

            // render search count
            //$("#search_count").find(".input").html(str);
            $("#search_count").find(".count").html(listLen);
        }

        //设置新歌榜
        function SetNewSongLst(songInfo) {
            //获取json格式的数据
            //console.log(songInfo);
            var songs = $.parseJSON(songInfo);
            //console.log(songs[0]['songHash']);
            var listLen = songs.length;
            var listHtml = '';

            for (var i = 0; i < listLen && i < 8; i++) {
                var ary = ["n1", "n2", "n3", "n4", "n5", "n6", "n7", "n8"];
                //console.log(ary[i]);
                listHtml += `
                            <tr data-song="" class ="" data-copytype="1">
                            <th><i class = "` + ary[i] + `" ></i></th>
                            <td class ="s_title">
	                            <span class ="s_title_txt s_title_icon_2" title= "` + songs[i]['songName'] + `" > ` + songs[i]['songName'] + ` </span>
                            </td>
                            <td class ="fct"><div class ="fct_btn"><a href="javascript:;" data-page="recommend_new" class ="play" title="播放"></a></div></td>
                            <td class ="u_title"><a href="javascript:;" class ="artist" title= "`+ songs[i]['songer'] + `"> `+ songs[i]['songer'] + ` </a></td>
                            </tr>
						`;
            }

            //console.log(listHtml);

            //// refreshDOM
            $("#infoList_new").html(listHtml);
        }

        //设置热歌榜
        function SetHotSongLst(songInfo) {
            //获取json格式的数据
            //console.log(songInfo);
            var songs = $.parseJSON(songInfo);
            //console.log(songs[0]['songHash']);
            var listLen = songs.length;
            var listHtml = '';

            for (var i = 0; i < listLen && i < 8; i++) {
                var ary = ["n1", "n2", "n3", "n4", "n5", "n6", "n7", "n8"];
                //console.log(ary[i]);
                listHtml += `
                            <tr data-song="" class ="" data-copytype="1">
	                            <th><i class = "` + ary[i] + `" ></i></th>
	                            <td class ="s_title">
		                            <span class ="s_title_txt s_title_icon_1" title= "` + songs[i]['songName'] + `" > ` + songs[i]['songName'] + ` </span>
	                            </td>
	                            <td class ="fct"><div class ="fct_btn"><a href="javascript:;" class ="play" data-page="recommend_hot" title="播放"></a></div></td>
	                            <td class ="u_title"><a href="javascript:;" class ="artist" title= "`+ songs[i]['songer'] + `"> `+ songs[i]['songer'] + ` </a></td>
                            </tr>
						`;
            }

            //console.log(listHtml);

            //// refreshDOM
            $("#infoList_hot").html(listHtml);
        }

    </script>
</head>
<body>

    <!-- page_list 页面左侧歌单 -->
    <div class="page_list">
        <div class="list_container" id="listContainer">
            <div class="list list_recommend">
                <p class="title">推荐</p>
                <div class="btngroups">
                    <p class="btn find"><i class="fa fa-music" aria-hidden="true"></i>&nbsp;&nbsp;发现音乐</p>
                    <p class="btn fm"><i class="fa fa-bullseye" aria-hidden="true"></i>&nbsp;&nbsp;私人FM</p>
                    <p class="btn mv"><i class="fa fa-youtube-play" aria-hidden="true"></i>&nbsp;&nbsp;MV</p>
                    <p class="btn friends"><i class="fa fa-user-plus" aria-hidden="true"></i>&nbsp;&nbsp;我的朋友</p>
                </div>
            </div>
            <div class="list list_me">
                <p class="title">我的音乐</p>
                <div class="btngroups">
                    <p class="btn local"><i class="fa fa-music" aria-hidden="true"></i>&nbsp;&nbsp;本地音乐</p>
                    <p class="btn download"><i class="fa fa-download" aria-hidden="true"></i>&nbsp;&nbsp;下载管理</p>
                    <p class="btn cloud"><i class="fa fa-cloud" aria-hidden="true"></i>&nbsp;&nbsp;我的音乐云盘</p>
                    <p class="btn singers"><i class="fa fa-user-plus" aria-hidden="true"></i>&nbsp;&nbsp;我的歌手</p>
                    <p class="btn me_mv"><i class="fa fa-youtube-play" aria-hidden="true"></i>&nbsp;&nbsp;我的MV</p>
                    <p class="btn me_fm"><i class="fa fa-bullseye" aria-hidden="true"></i>&nbsp;&nbsp;我的电台</p>
                </div>
            </div>
        </div>
    </div>
    <!-- page_main 主页 -->
    <div class="page_main R_page main_container" id="pageMain" style="display:block;">
        <!--<div id="useScroll" style="position: relative; overflow: hidden;">-->
        <div class="main_container">
            <div class="scroll_wrap" style="position:relative;top:0;">
                <div class="sectionBox clearfix">
                    <!-- banner begin -->
                    <div class="bannerWrapper fl" id="focusImg">
                        <ul class="banner_con" style="width: 4352px; left: -1088px;">
                            <li data-code="6" style="position: static; left: 4352px;"><img src="./src/images/pic_1.jpg" alt="" /></li>
                            <li data-code="6"><img src="./src/images/pic_2.jpg" alt="" /></li>
                            <li data-code="6"><img src="./src/images/pic_3.jpg" alt="" /></li>
                            <li data-code="7"><img src="./src/images/pic_4.jpg" alt="" /></li>
                            <li data-code="6"><img src="./src/images/pic_5.jpg" alt="" /></li>
                            <li data-code="6"><img src="./src/images/pic_6.jpg" alt="" /></li>
                            <li data-code="6"><img src="./src/images/pic_7.jpg" alt="" /></li>
                            <li data-code="6"><img src="./src/images/pic_8.jpg" alt="" /></li>
                        </ul>
                        <div class="banner_num">
                            <a class="prev_btn prev_next png" style="display: none;"></a>
                            <a class="next_btn prev_next png" style="display: none;"></a>
                        </div>
                    </div>
                    <!-- banner end   -->
                    <div class="sideBox fr" id="newPlayRadio" style="background:url(&#34;./src/images/bg1.png&#34;)">
                        <!--<img src="./src/images/more_dt.png" usemap="#more_link" id="radioPic" style="display: block;" />
                        <map name="more_link" id="more_link">
                            <area shape="polygon" coords="0 0,29 0,57 29,57 57" alt="更多电台" id="jumptoRadio" />
                        </map>-->
                    </div>
                </div>
            </div>

            <!-- 热门榜单start -->
            <div class="sectionWrapper bangdanWrapper clearfix">
                <div class="section_title_box">
                    <h3>热门榜单</h3>
                    <!--<a class="more_btn" id="moreBdLink">更多</a>-->
                </div>
                <!-- 新歌榜start -->
                <div class="bangdan_con new_con fl">
                    <div class="bangdan_title event_main_table_btn">
                        <a class="play_icon png play_btn event_play_all_bd" title="播放列表中全部歌曲"></a>
                        <a class="linkB" data-code="1">完整榜单</a>
                    </div>
                    <div id="rcBangdanTable" class="main_table_wrap" oncontextmenu="return false" onselectstart="return false">
                        <table class="rc_bangdan_table left_table main_table">
                            <tbody  id="infoList_new">

                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 新歌榜end -->
                <!-- 热歌榜start -->
                <div class="bangdan_con hot_con fr">
                    <div class="bangdan_title event_main_table_btn">
                        <a class="play_icon png play_btn event_play_all_bd"></a>
                        <a class="linkB" data-code="2">完整榜单</a>
                    </div>
                    <div id="hotBangdan" class="main_table_wrap" oncontextmenu="return false" onselectstart="return false">
                        <table class="rc_bangdan_table left_table main_table">
                            <tbody id="infoList_hot">
                            
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 热歌榜end -->
            </div>
            <!-- 热门榜单end -->
        </div>
      </div>
        <!-- page_search 搜索页 -->
        <div class="page_search R_page" id="pageSearch" style="display:none;">
            <div class="main_container">
                <div class="listcontainer">
                    <p style="margin:0px 40px;color:#bbb;" id="search_count">
                        <!--搜索 "<span class="input" style="color:#0b75c3;">STRING</span>"-->共搜到
                        <span class="count">0</span> 条结果，本页最多显示 40 条结果
                    </p>
                    <div class="listtab">
                        <div class="tabbtns clearfix">
                            <label class="label_btn active" for="song">单曲</label>
                            <label class="label_btn" for="singer">歌手</label>
                            <label class="label_btn" for="album">专辑</label>
                            <label class="label_btn" for="musicvideo">MV</label>
                            <label class="label_btn" for="playlist">歌单</label>
                            <label class="label_btn" for="songlrc">歌词</label>
                            <label class="label_btn" for="user">用户</label>
                        </div>
                        <!-- song -->
                        <input type="radio" id="song" name="tablist_s" checked="" />
                        <div class="tabitem musiclist">
                            <table>
                                <thead>
                                    <tr>
                                        <th>&nbsp;&nbsp;</th>
                                        <th>操作</th>
                                        <th>音乐标题</th>
                                        <th>歌手</th>
                                        <th>专辑</th>
                                        <th>时长</th>
                                    </tr>
                                </thead>
                                <tbody class="infolist" id="infoList_search">
                                    <!--								<tr>
                                                                        <td class="index">01</td>
                                                                        <td><i class="fa fa-heart-o" aria-hidden="true"></i>&nbsp;
                                                                            <i class="fa fa-download" aria-hidden="true"></i>
                                                                        </td>
                                                                        <td>-SONGNAME-</td>
                                                                        <td>-SINGER-</td>
                                                                        <td>-ALBUM-</td>
                                                                        <td>00:00</td>
                                                                    </tr>-->
                                </tbody>
                                </tfoot>
                            </table>
                        </div>
                        <!-- singer -->
                        <input type="radio" id="singer" name="tablist_s" />
                        <div class="tabitem singerlist">
                            <p style="margin:100px 0;text-align:center;color:#bbb;font-size:1rem;">--分类功能暂未上线--</p>
                        </div>
                        <!-- album -->
                        <input type="radio" id="album" name="tablist_s" />
                        <div class="tabitem albumlist">
                            <p style="margin:100px 0;text-align:center;color:#bbb;font-size:1rem;">--分类功能暂未上线--</p>
                        </div>
                        <!-- musicvideo -->
                        <input type="radio" id="musicvideo" name="tablist_s" />
                        <div class="tabitem musicvideolist">
                            <p style="margin:100px 0;text-align:center;color:#bbb;font-size:1rem;">--分类功能暂未上线--</p>
                        </div>
                        <!-- playlist -->
                        <input type="radio" id="playlist" name="tablist_s" />
                        <div class="tabitem playlist">
                            <p style="margin:100px 0;text-align:center;color:#bbb;font-size:1rem;">--分类功能暂未上线--</p>
                        </div>
                        <!-- songlrc -->
                        <input type="radio" id="songlrc" name="tablist_s" />
                        <div class="tabitem songlrclist">
                            <p style="margin:100px 0;text-align:center;color:#bbb;font-size:1rem;">--分类功能暂未上线--</p>
                        </div>
                        <!-- fm -->
                        <input type="radio" id="fm" name="tablist_s" />
                        <div class="tabitem fmlist">
                            <p style="margin:100px 0;text-align:center;color:#bbb;font-size:1rem;">--分类功能暂未上线--</p>
                        </div>
                        <!-- user -->
                        <input type="radio" id="user" name="tablist_s" />
                        <div class="tabitem userlist">
                            <p style="margin:100px 0;text-align:center;color:#bbb;font-size:1rem;">--分类功能暂未上线--</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

</body>
</html>
